<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>Boleto</title>

    <link rel="stylesheet" href="css/base.css" />
    <script src="https://js.stripe.com/v3/"></script>

    <script src="/utils.js" defer></script>
    <script src="/boleto.js" defer></script>
  </head>
  <body>
    <main>
      <a href="/">home</a>
      <h1>Boleto</h1>

      <p>
        Note: Boleto requires a Stripe account in Brazil and must be active on your account.
      </p>

      <form id="payment-form">
        <label for="name">
          Name
        </label>
        <input id="name" value="Jenny Rosen" required>

        <label for="email">
          Email
        </label>
        <input id="email" value="jr@example.com" required>

        <label for="tax_id">
          Tax id
        </label>
        <input id="tax_id" value="000.000.000-00" required>

        <label for="country">
          Country
        </label>
        <input id="country" value="BR" required>

        <label for="state">
          State
        </label>
        <input id="state" value="SP" required>

        <label for="city">
          City
        </label>
        <input id="city" value="São Paulo" required>

        <label for="postal_code">
          Postal Code
        </label>
        <input id="postal_code" value="01227-200" required>

        <label for="line1">
          Address
        </label>
        <input id="line1" value="Av Angelica 2491, Conjunto 91E" required>

        <!-- Used to display form errors. -->
        <div id="error-message" role="alert"></div>

        <button type="submit">Pay</button>
      </form>

      <div id="messages" role="alert"></div>
    </main>
  </body>
</html>
